<script setup>
import { reactive, ref ,onMounted} from 'vue'
import { checkMobile, checkPassword } from '@/utils/validate'
import Upload from '@/components/upload/index.vue'
import {addUser,updateUser} from '@/api/user'
import {getRoleList} from '@/api/role'
const emit=defineEmits(['flush'])
// 表单数据
const formData = ref({
  id: 0
})

onMounted(()=>{
  getRoleListData()
})
// 表单验证
const formRules = reactive({
  // username: [
  //   { required: true, message: '请输入用户名', trigger: 'blur' },
  //   { min: 2, max: 6, message: '请输入2~6个字符', trigger: 'blur' }
  // ],
  // password: [
  //   { validator: checkPassword, message: '请输入6~12个字符', trigger: 'blur' }
  //   // { required: true, message: '请输入密码', trigger: 'blur' },
  //   // { min: 6, max: 12, message: '请输入6~12个字符', trigger: 'blur' }
  // ],
  // mobile: [
  //   { required: true, message: '请输入手机号', trigger: 'blur' },
  //   { validator: checkMobile, trigger: 'blur' }
  // ]
})
// 提交验证


const formRef = ref()
const onSubmit = () => {
  
  formRef.value.validate(async(isSuccess) => {
    if (isSuccess) {
      //请求接口
      let r
      console.log("formData.value.id",formData.value.id);
      if(formData.value.id>0){
        //修改
        r= await updateUser(formData.value)
      }else{
        console.log(2222)
        r= await addUser(formData.value)
      }
      if(r.code==200){
        ElMessage({type: 'success', message: '操作成功' })
        state.value=false
        //调用父组件的函数，实现列表刷新
        onReset()
      }else{
        ElMessage({type: 'success', message: '操作失败' })
        onReset()
      }
    }
  })
}
const onReset = () => {
  formRef.value.resetFields()
  emit('flush')
}

// 对话框状态
const state = ref(false)

//取得角色数据
const options = ref([])
const getRoleListData = async () => {
    const r = await getRoleList()
    options.value = r.data.list
}
// 暴露
defineExpose({
  state,
  formData
})
//上传组件的url值
const picUrl = ref()

const emitsPicUrl = (picUrl)=>{
  formData.value.pic=picUrl
}
</script>
<template>
  <el-dialog
    v-model="state"
    :title="`${formData.mobile ? '修改' : '添加'}用户`"
    width="600"
    :before-close="() => (state = false)"
  >
    <!-- 内容 -->
    <el-form
      v-if="state"
      size="large"
      label-width="80"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input placeholder="请输入用户名" v-model="formData.userName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" v-model="formData.password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="empName">
            <el-input placeholder="请输入员工姓名" v-model="formData.empName" />
          </el-form-item>
        </el-col>
        <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender" class="ml-4">
              <el-radio value=1 size="large">男</el-radio>
              <el-radio value=2 size="large">女</el-radio>
            </el-radio-group>
          </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="formData.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="mobile">
            <el-input placeholder="请输入邮箱" v-model="formData.mobile" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
       
        <el-col :span="12">
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="formData.state" class="ml-4">
              <el-radio value=1 size="large">正常</el-radio>
              <el-radio value=2 size="large">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="">
            <el-radio-group v-model="formData.type" class="ml-4">
              <el-radio value=1 size="large">普通员工</el-radio>
              <el-radio value=0 size="large">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="头像" v-model="formData.pic"> <Upload @picUrl="emitsPicUrl"/> </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="formData.roleId" placeholder="请选择角色">
            <el-option
            v-for="item in options"
            :key="item.roleCode"
            :label="item.roleName"
            :value="item.id"
          />
          <!-- <el-option
            v-model="roleData"
            v-for="item in [
              { label: '超级管理员', value: '超级管理员' },
              { label: '财务', value: '财务' },
              { label: '运营', value: '运营' }
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
